<template>
  <window class="m-progress-detail am-form-group" ref="win" title="回访记录">
    <div class="am-form-group am-u-lg-12">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
        <el-form-item label="请选择回访时间" prop="visitTime">
          <el-date-picker type="datetime" placeholder="请选择回访时间" v-model="form.visitTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="type === 'campus'" label="请选择回访形式" prop="way">
          <el-select size="small" v-model="form.way" placeholder="请选择回访形式">
            <el-option
              v-for="item in ways"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择报读意愿" prop="regPossible">
          <el-select size="small" v-model="form.regPossible" placeholder="请选择报读意愿">
            <el-option
              v-for="item in regPossibles"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择科目">
          <el-select clearable size="small" v-model="form.subjectId" placeholder="请选择科目">
            <el-option
              v-for="item in subjects"
              :key="item.subjectId"
              :label="item.subjectName"
              :value="item.subjectId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择意向班型">
          <el-select v-model="form.regLevel" placeholder="请选择意向班型">
            <el-option
              v-for="item in regLevels"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择是否继续跟进" prop="againVisitStatus">
          <el-select size="small" v-model="form.againVisitStatus" placeholder="请选择是否继续跟进" >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择再次回访时间" prop="againVisitTime" v-if="form.againVisitStatus ==1">
          <el-date-picker type="datetime" placeholder="请选择再次回访时间" v-model="form.againVisitTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="visitTimes=== true" label="是否到店">
          <el-select size="small" v-model="form.isCameToCampus" placeholder="是否到店">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请填写回访内容" prop="remark">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="历史回访记录" >
          <el-table
            :data="resourceVisitList"
            height="150"
            border
            style="width: 100%">
            <el-table-column
              prop="visitOperatorName"
              label="回访人"
              width="100">
            </el-table-column>
            <el-table-column  prop="visitTime"  label="回访时间"  width="160">
              <template scope ="scope">
                <span>{{scope.row.visitTime | formatTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="回访内容">
            </el-table-column>
          </el-table>
        </el-form-item>
        <div class="am-text-center">
          <el-button type="primary" @click="handleConfirm()">保存</el-button>
        </div>
      </el-form>
    </div>
  </window>
</template>

<script>
  import io from '../../lib/io'
  import {regLevels} from '../../lib/global'
  import moment from 'moment'

  export default{
    components: {},
    data: function () {
      return {
        type: 'campus',
        visitTimes: false,
        form: {
          customerResourceId: '',
          way: '',
          regPossible: '',
          subjectId: '',
          gradeId: '',
          remark: '',
          isCameToCampus: '0',
          againVisitStatus:'',
          againVisitTime:'',
          visitTime: '',
          regLevel: ''
        },
        ways: [{
          label: '电话',
          value: 0,
        },{
          label: '直访',
          value: 1,
        },{
          label: '其他方式',
          value: 2,
        }],
        regPossibles: [{
          label: '一般',
          value: 0,
        },{
          label: '强烈',
          value: 1,
        },{
          label: '无意愿',
          value: 2,
        }],
        rules: {
          visitTime: [
            {type: 'date', required: true, message: '请选择回访时间', trigger: 'change' }
          ],
          way: [
            {type: 'number', required: true, message: '请选择回访形式', trigger: 'change' }
          ],
          regPossible: [
            {type: 'number', required: true, message: '请选择咨报读意', trigger: 'change' }
          ],
          remark: [
            {required: true, message: '请填写回访内容', trigger: 'blur' }
          ],
          againVisitStatus:[
            {
              type: 'string',required: true, message: '请选择是否继续跟进', trigger: 'change'
            }
          ]
        },

        tableData: [],
        resourceVisitList:[],
      }
    },
    created () {
      this.regLevels = regLevels
      if (window.config.areaTeams) {
        this.form.areaTeamId = window.config.areaTeams[0].areaTeamId
      }

    },
    watch: {

    },
    computed: {
      grades: function() {
        return this.$root.config.grades.map(function(item) {
          return { gradeId: item.gradeId, gradeName: item.gradeName }
        })
      },
      subjects: function() {
        return this.$root.config.subjects.map(function(item) {
          return { subjectId: item.subjectId, subjectName: item.subjectName }
        })
      },
    },
    methods:{
      handleConfirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let param = {...this.form}
            if(this.form.visitTime!==''){
              param.visitTime = moment(this.form.visitTime).format('YYYY-MM-DD HH:mm:ss')
            }
            if(this.form.againVisitStatus == 0){
              param.againVisitTime = ""
            }
            if(this.form.againVisitStatus == 1 && param.againVisitTime!==""){
              param.againVisitTime = moment(this.form.againVisitTime).format('YYYY-MM-DD HH:mm:ss')
            }else{
              param.againVisitTime = ''
            }
            io.post(io.saveVisitContent,param, (ret) => {
              if (ret.success) {
                this.$toast('保存成功！')
                this.$emit('completed')
                this.$refs.form.resetFields();
                this.handleCancel()
              } else {
                this.$alert(ret.desc)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      findOneResourceVisitList(){
        let param = {
          customerResourceId:this.form.customerResourceId
        }
        io.post(io.findOneResourceVisitList,param,(data)=>{
          if(data.success){
            this.resourceVisitList = data.data
            console.log(data)
          }else{
            this.$alert(data.desc)
          }

        })
      },
      handleCancel () {
        this.$refs.win.close()
      },
      show:function(){
        this.$refs.win.show( { width : 800 } )
        this.findOneResourceVisitList()
      }
    }
  }

</script>
<style lang="less" scoped>
  .m-progress-detail {
    .el-form {
      width: 550px;
      margin: 0 auto;
      text-align: left;
      margin-top: 30px;
      .el-select, .el-date-editor.el-input {
        width: 250px;
      }
    }
  }
</style>
